/**
 * 受控组件 简化操作
 */
import React, { Component } from "react";

export default class ControlForm extends Component {
  //1. 声明状态
  state = {
    user: '',
    pass: '',
    email: '',
    qq: ''
  }

  render() {
    return (
      <div>
        <h2>登录</h2>
        <hr />
        <form action="">
          {/* 2. 为 input 元素设置 value 属性, 值为状态值 并且要设置 onChange 事件 */}
          用户名: <input type="text" name="user" value={this.state.user} onChange={this.save} />
          <br />
          密码: <input type="password" name="pass" value={this.state.pass} onChange={this.save} />
          <br />
          邮箱: <input type="text" name="email" value={this.state.email} onChange={this.save} />
          <br />
          QQ 号: <input type="text" name="qq" value={this.state.qq} onChange={this.save} />
          <br />
          <hr />
          <button onClick={this.login}>登录</button>
          <button onClick={this.reset}>清空</button>
        </form>
      </div>
    );
  }
  //
  save = (e) => {
    //更新状态
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  //登录的事件回调
  login = (e) => {
    e.preventDefault()
    console.log(`用户名为: ${this.state.user} 密码为: ${this.state.pass}`)
  };

  //表单重置
  reset = (e) => {
    e.preventDefault()
    this.setState({
      user: '',
      pass: ''
    })
  }

  
  
}
